<template>
	<view class="view-root">
		<u-empty-state v-if="signList.length == 0" value="暂无相关签约订单"></u-empty-state>
		<scroll-view v-else class="list-scroll" scroll-y="true" @scrolltolower="loadMoreOrders()">
			<view v-for="(order, index) in signList" :key="index" class="sign-item-wrap">
				<view class="sign-item-card" @click="gotoRouter('/pages-hospital/signOrderDetail/signOrderDetail?id=' + order.id)">
					<view class="sign-title-wrap">
						<image :src="order.picture"></image>
						<view class="doctor-name">{{order.doctorName}}</view>
						<view class="doctor-department">{{order.departmentName}}</view>
						<view :class="statusStyle[order.status]">{{statusName[order.status]}}</view>
					</view>
					<view class="divider-line"></view>
					<view class="sign-info">{{order.signingTitle + '  ' + order.signingName + '￥' + order.signingPrice}}</view>
					<view class="sign-time">{{order.createdTime}}</view>
					<view v-if="order.status == 0" class="pay-btn" @click.stop="payOrder(order.id)">去支付</view>
				</view>
			</view>
			<view v-if="totalSize == signList.length && signList.length != 0" class="end-line">～我是有底线的呢～</view>
			<view style="height: 40rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//0.待支付 1.服务中 2.已失效 9.已取消
				statusStyle: {
					0: 'server-status-wait',
					1: 'server-status-valid',
					2: 'server-status-invalid',
					9: 'server-status-invalid'
				},
				statusName: {
					0: '待支付',
					1: '服务中',
					2: '已失效',
					9: '已取消'
				},
				signList: [],
				totalSize: 0,
				currPage: 1,
				pageSize: 20,
				payFlag: true //支付按钮开关
			};
		},
		onShow() {
			this.queryOrderList();
		},
		methods: {
			queryOrderList() {
				this.currPage = 1;
				this.$api
					.querySignOrders({
						params: {
							pageNo:this.currPage,
							pageSize: this.pageSize
						}
					})
					.then(res => {
						if (res.code == 200) {
							this.signList = res.result.records;
							this.totalSize = res.result.total;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					});
			},
			
			loadMoreOrders() {
				if (this.totalSize > this.signList.length) {
					this.$api.querySignOrders({
						params: {
							pageNo: this.currPage + 1,
							pageSize: this.pageSize
						}
					}).then(res => {
						if (res.code == 200) {
							this.signList = this.signList.concat(res.result.records);
							this.totalSize = res.result.total;
							this.currPage = res.result.current;
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							});
						}
					})
				}
			},
			
			//发起微信支付
			payOrder(orderId) {
				if (this.payFlag) {
					this.payFlag = false;
					this.$api
						.payDoctorSign({
							data: {
								id: orderId
							}
						})
						.then(res => {
							if (res.code == 200) {
								this.wxRequestPayment(res.result);
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								});
							}
						});
				}
			},
			
			//微信小程序拉起支付
			wxRequestPayment(res) {
				wx.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.packageValue,
					signType: res.signType,
					paySign: res.paySign,
					success: success => {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						});
						this.queryOrderList();
					},
					fail: error => {
						uni.showToast({
							title: '取消支付',
							icon: 'none'
						});
					},
					complete: () => {
						this.payFlag = true;
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
@import './signOrderList.less';
</style>
